import { mapValues, without } from 'lodash-es'
import type { CommonDefaultProps, TextComponentProps, ImageComponentProps } from '@/utils/type'
export const commonDefaultProps: CommonDefaultProps = {
  // actions
  actionType: '',
  url: '',
  // size
  width: '',
  height: '',
  paddingLeft: '0px',
  paddingRight: '0px',
  paddingTop: '0px',
  paddingBottom: '0px',
  // border
  borderWidth: '0',
  borderStyle: 'none',
  borderColor: '#000000',
  borderRadius: '0',
  // shadow and opacity
  boxShadow: '0 0 0 rgba(0, 0, 0, 1)',
  opacity: '1',
  // position
  position: 'absolute',
  top: '0',
  left: '0',
  right: '0',
}

export const textComponentProps: TextComponentProps = {
  text: '正文内容',
  fontSize: 14,
  fontFamily: '',
  fontWeight: 'normal',
  fontStyle: 'normal',
  textDecoration: 'none',
  lineHeight: 1,
  textAlign: 'left',
  color: '#000000',
  backgroundColor: '',
  ...commonDefaultProps
}

export const imageComponentProps: ImageComponentProps = {
  src: '',
  ...commonDefaultProps
}

export const isEditingProp = {
  isEditing: {
    type: Boolean,
    default: false
  }
}

export const transformToComponentProps = <T extends {}>(props: T) => {
  const mapProps = mapValues(props, item => {
    return {
      type: (item as any).constructor as StringConstructor,
      default: item
    }
  })
  return {
    ...mapProps,
    ...isEditingProp
  }
}

export const textStylePropNames = without(Object.keys(textComponentProps), 'actionType', 'url', 'text')
export const imageStylePropNames = without(Object.keys(imageComponentProps), 'src')